<template>
  <div class="maps-container">
    <div id="main" style="width:100%; height:100%"></div>
    <div class="btn">
      <span @click="getData(530000)">云南</span>
      <span v-if="cityView">
        <i class="el-icon-arrow-right"></i>
        {{cityName}}
      </span>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import echarts from "echarts";
// import obj from "echarts/map/json/china.json";
// import obj from "echarts/map/json/province/yunnan.json";
export default {
  data() {
    return {
      valueList: [
        { accept: 36, result: 35, areaCode: 533300 },
        { accept: 117, result: 117, areaCode: 530700 },
        { accept: 268, result: 267, areaCode: 532800 },
        { accept: 842, result: 142, areaCode: 530900 },
        { accept: 215, result: 214, areaCode: 530800 },
        { accept: 370, result: 370, areaCode: 530600 },
        { accept: 135, result: 135, areaCode: 533100 },
        { accept: 533, result: 533, areaCode: 530300 },
        { accept: 248, result: 248, areaCode: 530500 },
        { accept: 290, result: 290, areaCode: 532900 },
        { accept: 658, result: 657, areaCode: 532500 },
        { accept: 238, result: 238, areaCode: 532600 },
        { accept: 989, result: 985, areaCode: 530100 },
        { accept: 299, result: 299, areaCode: 530400 },
        { accept: 592, result: 192, areaCode: 532300 },
        { accept: 90, result: 88, areaCode: 533400 }
      ],
      ynCodeList: [
        530000,
        530100,
        530300,
        530400,
        530500,
        530600,
        530700,
        530800,
        530900,
        532300,
        532500,
        532600,
        532800,
        532900,
        533100,
        533300,
        533400
      ],
      dataArr: [],
      cityView: false,
      cityName: ""
    };
  },
  created() {},
  mounted() {
    this.getData(530000);
  },
  methods: {
    getWidth() {
      let cw = document.documentElement.clientWidth;
      let ch = document.documentElement.clientHeight;
      let w = cw * 0.25 + "px";
      let h = ch * 0.5 + "px";
      document.getElementById("main").style.width = w;
      document.getElementById("main").style.height = h;
    },
    getData(cityCode) {
      // findAllAcceptDataByArea().then(res => {
      //   console.log("getData", res);
      // });
      if (cityCode == 530000) {
        this.cityView = false;
        this.dataArr = [
          {
            name: "昆明市",
            latitude: "25.040609",
            accept: 10,
            result: 231,
            areaCode: "530100",
            longitude: "102.712251"
          },
          {
            name: "曲靖市",
            latitude: "25.501557",
            accept: 10,
            result: 20,
            areaCode: "530300",
            longitude: "103.797851"
          },
          {
            name: "玉溪市",
            latitude: "24.350461",
            accept: 10,
            result: 30,
            areaCode: "530400",
            longitude: "102.543907"
          },
          {
            name: "保山市",
            latitude: "25.111802",
            accept: 10,
            result: 450,
            areaCode: "530500",
            longitude: "99.167133"
          },
          {
            name: "昭通市",
            latitude: "27.336999",
            accept: 10,
            result: 3,
            areaCode: "530600",
            longitude: "103.717216"
          },
          {
            name: "丽江市",
            latitude: "26.872108",
            accept: 10,
            result: 236,
            areaCode: "530700",
            longitude: "100.233026"
          },
          {
            name: "普洱市",
            latitude: "22.777321",
            accept: 10,
            result: 213,
            areaCode: "530800",
            longitude: "100.972344"
          },
          {
            name: "临沧市",
            latitude: "23.886567",
            accept: 10,
            result: 233,
            areaCode: "530900",
            longitude: "100.08697"
          },
          {
            name: "楚雄州",
            latitude: "25.041988",
            accept: 10,
            result: 23,
            areaCode: "532300",
            longitude: "101.546046"
          },
          {
            name: "红河州",
            latitude: "23.2",
            accept: 10,
            result: 123,
            areaCode: "532500",
            longitude: "103.384182"
          },
          {
            name: "文山州",
            latitude: "23.75",
            accept: 10,
            result: 23,
            areaCode: "532600",
            longitude: "104.5"
          },
          {
            name: "西双版纳",
            latitude: "22.001724",
            accept: 10,
            result: 223,
            areaCode: "532800",
            longitude: "100.797941"
          },
          {
            name: "大理州",
            latitude: "25.589449",
            accept: 10,
            result: 123,
            areaCode: "532900",
            longitude: "100.225668"
          },
          {
            name: "德宏州",
            latitude: "24.436694",
            accept: 10,
            result: 93,
            areaCode: "533100",
            longitude: "98.578363"
          },
          {
            name: "怒江州",
            latitude: "25.850949",
            accept: 10,
            result: 23,
            areaCode: "533300",
            longitude: "98.854304"
          },
          {
            name: "迪庆州",
            latitude: "27.826853",
            accept: 10,
            result: 430,
            areaCode: "533400",
            longitude: "99.706463"
          }
        ];
      } else {
        this.dataArr = [];
      }
      /* 根据城市编号请求城市json */
      if (this.ynCodeList.indexOf(cityCode) == -1) {
        console.log("阻止请求");
        return;
      }
      import("@/views/echart/yunnan/" + cityCode + ".geo").then(res => {
        console.log("州/市json", res);

        setTimeout(() => {
          this.drawMap(cityCode, res);
        });
      });

      this.getWidth();
    },
    drawMap(cityCode, obj) {
      let myChart = echarts.init(document.getElementById("main"));
      echarts.registerMap("yunan", obj); // 注册地图，

      function getColor(type, typeType) {
        var color;
        if (isNaN(type)) {
          switch (type) {
            case "优":
              color = "#43ce17";
              break;
            case "良":
              color = "#efdc31";
              break;
            case "轻度污染":
              color = "#fa0";
              break;
            case "中度污染":
              color = "#ff401a";
              break;
            case "总受理量":
              color = "hsl(240,100%,50%)";
              break;
            case "总办结量":
              color = "#43ce17";
              break;
            default:
              break;
          }
        } else {
          function getAQITYPE(num) {
            if (num <= 100) {
              return "优";
            } else if (num <= 200) {
              return "良";
            } else if (num <= 300) {
              return "轻度污染";
            } else {
              return "中度污染";
            }
          }
          color = getColor(getAQITYPE(type));
        }
        return color;
      }

      let backgroundColor = "rgba(31, 60, 69,.88)", //'#1f1a1a',
        textColor = "gray",
        fontFamily = "仿宋",
        $body = $(myChart.getDom());
      $body.css({
        "font-family": fontFamily
      });

      let option = {
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbol: "rect",
            symbolSize: function(a, p) {
              var size = [12 * p.name.length, 25];
              return size;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            tooltip: {
              formatter: function(params) {
                const data = params.data.data;
                var $ul = $("<ul><li><b>" + params.name + "</b></li></ul>");
                $ul.css({
                  "font-size": "small",
                  "border-radius": "5px",
                  "list-style": "none",
                  padding: "10px",
                  "box-shadow": "0 1px 4px #ddd",
                  color: params.color
                });
                $ul
                  .children()
                  .first()
                  .css({
                    "font-size": "large",
                    "border-bottom": "1px double"
                  });
                if (data.areaCode) {
                  $ul.data("code", data.areaCode);
                }
                let option = {
                  // title: {
                  //   text: data.name
                  // },
                  grid: {
                    show: true
                  },
                  yAxis: {
                    type: "category",
                    axisLabel: {
                      rotate: -45,
                      textStyle: {
                        color: "white"
                      },
                      show: false
                    },
                    data: [],
                    show: false,
                    name: data.name,
                    nameLocation: "end",
                    nameTextStyle: {
                      color: "white"
                    }
                  },
                  series: [
                    {},
                    {
                      zlevel: "2",
                      type: "bar",
                      gridIndex: 0,
                      label: {
                        normal: {
                          show: true,
                          position: "insideLeft",
                          formatter: "{b}:{c}",
                          fontFamily: fontFamily,
                          fontWeight: "bold"
                        }
                      },
                      data: []
                    }
                  ]
                };

                $ul
                  .children()
                  .first()
                  .find("b")
                  .css({
                    color: "whitesmoke",
                    "text-shadow": "0 1px 2px black"
                  });

                if (data.accept) {
                  $("<li><b>总受理量：</b>" + data.accept + "</li>").appendTo(
                    $ul
                  );
                  option.yAxis.data.push("总受理量");
                  option.series[1].data.push({
                    value: data.accept,
                    itemStyle: {
                      // color: getColor("总受理量")
                      color: getColor(data.accept)
                    }
                  });
                }
                if (data.result) {
                  $("<li><b>总办结量：</b>" + data.result + "</li>").appendTo(
                    $ul
                  );
                  option.yAxis.data.push("总办结量");
                  option.series[1].data.push({
                    value: data.result,
                    itemStyle: {
                      // color: getColor("总办结量")
                      color: getColor(data.result)
                    }
                  });
                }

                $ul
                  .children("li")
                  .find("span")
                  .css("font-size", "xx-small");
                myChart.setOption(option);
                return $ul.prop("outerHTML");
              }
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                //position: 'right',
                show: true,
                backgroundColor: backgroundColor,
                borderColor: "#ddd",
                borderWidth: 1,
                fontFamily: fontFamily,
                fontWeight: "bold",
                fontSize: 13,
                color: "whitesmoke",
                padding: 4
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 10,
                shadowColor: "#333"
              }
            }
          }
        ]
      };
      let _this = this;
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }

      setTimeout(function() {
        const $tbody = $("<table id='tables'></table>");
        $("#tables").remove();
        $tbody.css({
          position: "absolute",
          right: "2px",
          bottom: "2px",
          color: "#f1f1f1",
          "z-index": 9,
          "box-shadow": "0 1px 4px #ddd",
          "background-color": backgroundColor
        });
        $tbody.appendTo($body);

        myChart.setOption({
          backgroundColor: "#154e90",
          grid: {
            backgroundColor: backgroundColor,
            show: false,
            containLabel: true,
            zlevel: "2",
            left: "10",
            bottom: "180",
            width: "30%",
            height: "30%",
            borderWidth: 0
          },
          xAxis: {
            type: "value",
            splitLine: {
              show: false
            },
            show: false
          },
          visualMap: {
            seriesIndex: 0,
            // backgroundColor: "whitesmoke",
            bottom: 2,
            left: 2,
            borderRadius: 0,
            itemWidth: 38,
            itemGap: 4,
            padding: 5,
            inverse: true,

            pieces: [
              {
                min: 0,
                max: 100,
                // label: "优",
                color: getColor("优")
              },
              {
                min: 100,
                max: 200,
                // label: "良",
                color: getColor("良")
              },
              {
                min: 201,
                max: 300,
                // label: "轻度",
                color: getColor("轻度污染")
              },
              {
                min: 301,
                color: getColor("中度污染")
              }
            ],
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {
            trigger: "item",
            confine: true,
            enterable: true,
            textStyle: {
              fontFamily: fontFamily
            }
          },
          geo: {
            // 地理坐标系组件
            map: "yunan",
            roam: true,
            zoom: 1.2,
            silent: true /* 是否触发鼠标点击事件 */,
            label: {
              normal: {
                show: false /* 显示省/市名称 */,
                textStyle: {
                  color: "#fff"
                }
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              color: "#fff",
              normal: {
                areaColor: "rgba(127,199,221,0.1)" /* 地图颜色 */,
                borderColor: "#0177ff"
              },
              emphasis: {
                // areaColor: "#071537" // 鼠标指上时的颜色
                areaColor: "#389BB7"
              }
            }
          },
          series: [
            {
              data: _this.dataArr
                .filter(function(item) {
                  return item.latitude && item.longitude;
                })
                .map(function(item, index) {
                  item.value = [item.longitude, item.latitude].concat(
                    item.result
                  );

                  var $tr = $(
                    "<tr><td>" +
                      (index + 1) +
                      "</td><td>" +
                      item.name +
                      "</td><td>" +
                      (item.result ? item.result : "--") +
                      "</td></tr>"
                  );
                  $tr.appendTo($tbody);

                  $tr
                    .children()
                    .not(":eq(1)")
                    .css({
                      "text-align": "center"
                    });
                  $tr.children().css({
                    border: "none",
                    "border-bottom": "1px dotted",
                    padding: 0
                  });
                  $tr
                    .children()
                    .last()
                    .css("background-color", getColor(item.result));
                  return {
                    name: item.name,
                    value: item.value,
                    data: item
                  };
                })
            }
          ]
        });
      }, 100);

      myChart.on("click", this.echartsMapClick);
    },

    echartsMapClick(params) {
      console.log(params);
      if (params.data.data.areaCode) {
        console.log(params.data.data.areaCode);
        this.getData(params.data.data.areaCode * 1);
      }

      if (params.data.name) {
        if (params.data.data.areaCode == 530000) {
          return;
        } else {
          this.cityView = !this.cityView;
          this.cityName = params.data.name;
        }
      }
    }
  }
};
</script>
<style scoped lang="scss">
.maps-container {
  width: 100%;
  height: 100%;
  position: relative;
  .btn {
    position: absolute;
    top: 20px;
    left: 20px;
    border-top: 1px solid aqua;
    border-bottom: 1px solid aqua;
    color: #fff;
    font-size: 20px;
    span {
      cursor: pointer;
      padding: 8px 0;
    }
    span:first-child {
      margin-right: 2px;
    }
  }
}
</style>
